<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>预约寄件</title>
    <!-- Bootstrap -->
    <link href="../bots/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <form action="">
    	<div class="div-bg">
	    	<table class="table ji_table table_1">
				<tr>
					<td class="col-xs-1">
						<table>
							<tr><td style="height:74px;"><img src="../bots/image/j.png" class=" center-block img-circle"  width="38" alt=""></td></tr>
							<tr><td style=""><img src="../bots/image/h.png" class=" center-block img-circle"  width="20" alt="" onClick="change()"></td></tr>
							<tr><td style="height:70px;"><img src="../bots/image/sj.png" class=" center-block img-circle" width="36" alt=""></td></tr>
						</table>
					</td>
					<td class="col-xs-11">
						<table class="table ji_table">
							<tr>
								<td style="padding:0px;border-top:0px;height:80px;">
									<textarea class="js" name="" id="j_info"  placeholder="点击添加寄件人" rows="2" style="border:1px;resize:none;" readonly></textarea>
								</td>
								<td class="dz" style="border-top:0px;">
									<span class="line"></span>
									<img src="../bots/image/ad.png" class="img-dz" alt=""><span class="dzb">地址簿</span>
								</td>
							</tr>
							<tr>
								<td style="padding:0px;height:80px;">
									<textarea class="js" name="" onClick="" id="s_info"  placeholder="点击添加收件人" style="border:0px;resize:none;"  rows="2" readonly></textarea>
								</td>
								<td class="dz">
									<span class="line"></span>
									<img src="../bots/image/ad.png" class="img-dz" alt="" ><span class="dzb">地址簿</span>
								</td>
								</tr>
						</table>
					</td>
				</tr>
	    	</table>
	    </div>
	    <!-- 寄件方式 -->
	    <div class="div-bg">

	    <table class="table ji_table table_2">
			<tr>
				<td class="td_l">寄件方式</td>
				<td class="td_r">
					<a href="#" class="btn btn-primary btn-small disabled" role="button">官方取件</a>
					<a href="#" class="btn btn-default btn-small disabled" role="button">指定小哥</a>
				</td>
			</tr>
			<tr>
				<td class="td_l">上门时间&nbsp;
					<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
				</td>
				<td class="td_r">请选择上门时间&nbsp;
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr>
				<td class="td_l">物品&amp;重量</td>
				<td class="td_r">请选择&nbsp;
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr>
				<td class="td_l">保价</td>
				<td class="td_r col-xs-8">若价值超过500元建议保价&nbsp;
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr name="ser" onClick="pop('ser')">
				<td class="td_l">增值服务</td>
				<td class="td_r">代收货款&nbsp;
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr name="say" id="say">
				<td class="td_l">对快递员说</td>
				<td class="td_r">有什么需要通知小哥的吗？&nbsp;
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
	    </table>

	   </div>

	   <!-- 更多收件人 -->
	   <div class="div-bg">
	    <table class="table ji_table table_more">
		    <tr>
		    	<td style="border-top:0px;height:46px;text-align:center;color:#3B95FA;">
			    	<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;添加更多收件人
				</td>
			</tr>
	    </table>
	    </div>
	    


	   

	   <!-- 协议 -->
	   <div class="div-hid">
	    </div>
	    <div class="div-bg bottom">
	    <table class="table ji_table table_3">
		    <tr>
		    	<td colspan="2" style="border-top:0px;background-color:#EEF6FF;">
		    	<div class="radio">
				  	<label>
			    		<input type="radio" name="" id="type_radio" class="type_radio" value="option2">&nbsp;
					    <span>我已同意并接受&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><strong>&lt;&lt;快递服务协议&gt;&gt;</strong></a></span>
					</label>
				</div>
				</td>
			</tr>
			<tr>
		    	<td class="td_l">
		    		<p><span class="yf_l">预估运费:</span>&nbsp;<strong><span class="yf">&yen;--.--</span></strong>&nbsp;&nbsp;<span class="up glyphicon glyphicon-menu-up" aria-hidden="true"></span></p>
		    		<p><span class="sjfy">实际费用以快递小哥揽件核实为准</span></p>
				</td>
				<td class="sub"><input class="btn btn-default" type="submit" click="" value="提交"></td>
			</tr>
	    </table>
	    </div>
	
	</form>

	 <!-- 对小哥说 -->
	    <div class="div-bg say none">
	    <table class="table ji_table table_more">
		    <tr>
		    	<td style="border-top:0px;height:46px;text-align:center;color:#3B95FA;">
			    	<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;aaa
				</td>
			</tr>
	    </table>
	    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
  <script type="text/javascript"> 
	function change(){ 
	  var j_info = document.getElementById("j_info").value; 
	  var s_info = document.getElementById("s_info").value; 
	{ 
	   document.getElementById("s_info").value = j_info; 
	   document.getElementById("j_info").value = s_info; 
	  } 
	 } 

	 $("#j_info").on('click',function(e){
	 	window.location.href="./j_address.html";
	 })
	 $("#s_info").on('click',function(e){
	 	window.location.href="./s_address.html";
	 })

	 $("#say").click(function(){
	  $(".say").animate({height:'500px'});
	});


	  
</script>
</html>